{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}用户注册{% endblock %}

{% block css %}
	<link rel="stylesheet" href="{% static 'css/account.css' %}">
	<style>
        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }
	</style>
{% endblock %}

{% block content %}
	<div class="account">
		<div class="title">用户注册</div>
		<form id="regForm" method="POST" novalidate>
			{#自动生成csrf_token#}
			{% csrf_token %}
			{% for field in form %}
				{% if field.name == 'code' %}
					<div class="form-group">
						<label for="{{ field.id_for_label }}">{{ field.label }}</label>
						<div class="row">
							<div class="col-xs-7">
								{{ field }}
								<span class="error-msg">{{ field.errors.0 }}</span>
							</div>
							<div class="col-xs-5">
								<input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码">
							</div>
						</div>
					</div>
				{% else %}
					<div class="form-group">
						<label for="{{ field.id_for_label }}">{{ field.label }}</label>
						{{ field }}
						<span class="error-msg">{{ field.errors.0 }}</span>
					</div>
				{% endif %}
			{% endfor %}
			<div class="row">
				<div class="col-xs-3">
					<button id="btnSubmit" type="button" class="btn btn-primary">注 册</button>
				</div>
			</div>
		</form>
	</div>
{% endblock %}

{% block js %}
	<script>
        // 页面框架加载完成后自动执行函数
        $(function () {
            bindClickBtnSms();
            bindClickSubmit();
        })

        /*
        点击获取验证码的事件
         */
        function bindClickBtnSms() {
            $("#btnSms").click(function () {
                // 先将所有的error清空
                $(".error-msg").empty();
                // 获取用户的手机号
                var mobilePhone = $("#id_mobile_phone").val();

                // 发送ajax请求
                $.ajax({
                    url: '{% url 'send_sms' %}', // 等价于 /send/sms/
                    type: 'GET',
                    data: {mobile_phone: mobilePhone, tpl: 'register'},
                    // 将服务器端返回的数据反序列化为字典
                    dataType: "JSON",
                    success: function (res) {
                        // ajax请求发送成功后, 自动执行的函数, res就是后端返回的值
                        if (res.status) {
                            //console.log("发送成功, 倒计时");
                            sendSmsRemind();
                        } else {
                            // 错误信息
                            // {'status': False, 'error': {'mobile_phone': ['错误信息', ]}}
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }

        /*
        倒计时
         */
        function sendSmsRemind() {
            var $smsBtn = $("#btnSms");
            // 禁用
            $smsBtn.prop('disabled', true);
            var time = 60;
            var remind = setInterval(function () {
                $smsBtn.val(time + '秒重新发送');
                time = time - 1;
                if (time < 1) {
                    clearInterval(remind);
                    $smsBtn.val('点击获取验证码').prop('disabled', false);
                }
            }, 1000)
        }

        /*
        点击提交注册
         */
        function bindClickSubmit() {
            $("#btnSubmit").click(function () {
                $(".error-msg").empty();
                $.ajax({
                    url: '{% url "register" %}',
                    type: 'POST',
                    // 表单中所有字段的数据, 包括自动生成的csrf_token
                    data: $("#regForm").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            // 跳转
							location.href = res.data;
                        } else {
                            // 错误信息
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }

	</script>
{% endblock %}
